<html>
<title>Facebook Timeline Design with jquery and CSS</title>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/JSON.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/app.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/style_chitiet.css"/>
</head>
<body>


<!--nav id="navigation" role="navigation">
      <ul class="channels">
            <li class="home"><a href="index.html" title="Trang chủ"><span class="icon ti-home"></span><span class="name">Trang chủ</span></a></li>
            <li class="community"><a href="channel.html" title="Cộng đồng"><span class="icon ti-star"></span><span class="name">Cộng đồng</span></a></li>
            <li class="original"><a href="channel.html" title="Original"><span class="icon ti-video-camera"></span><span class="name">Original</span></a></li>
            <li class="tvshow"><a href="channel.html" title="TV Show"><span class="name">TV Show</span></a></li>
            <li class="movie"><a href="channel.html" title="Phim"><span class="name">Phim</span></a></li>
            <li class="anime"><a href="channel.html" title="Hoạt hình"><span class="name">Hoạt hình</span></a></li>
            <li class="musicvideo"><a href="channel.html" title="Music Video"><span class="name">Music Video</span></a></li>
            <li class="sport"><a href="channel.html" title="Thể thao"><span class="name">Thể thao</span></a></li>
            <li class="education"><a href="channel.html" title="Giáo dục"><span class="name">Giáo dục</span></a></li>
            <li class="news"><a href="channel.html" title="Tin tức"><span class="name">Tin tức</span></a></li>
            <li class="funny"><a href="channel.html" title="Hài"><span class="name">Hài</span></a></li>
            <li class="game"><a href="channel.html" title="Game"><span class="name">Game</span></a></li>
      </ul>
    </nav-->


 <div id="containertop" >
 <!--div id='profile' style='margin:10px;height:100px'>
 <img src='http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe&s=100' style='border:solid 2px #cc0000;float:left;' alt='Srinivas Tamada'/>
 <h1 style='margin-left:120px'>Facebook Timeline Design using Jquery</h1>
<h2 style='margin-left:120px'>Srinivas Tamada </h2>
 <h4 style='margin-left:120px'>Tutorial Link <a href='http://9lessons.info'>Click Here</a> - Follow me <a href='http://9lessons.info'>@9lessons</a> - Add Me <a href='http://fb.com/srinivas.tamada'>fb.com/srinivas.tamada</a> </h4>

 </div-->
 <div id="head-wrapper">
    	<div id="head-bar">
    		<div class="head-menu"><p class="head-font"><a href="Index.html" target="_blank">New</a></div>
            <div class="head-menu"><p class="head-font">Status</p></div>
            <div class="head-menu"><p class="head-font"><a href="Hinh.html" target="_blank">Pictures</a></p></div>
            <div class="head-menu"><p class="head-font"><a href="Video.html" target="_blank">Videos</a></p></div>
            
   	 	</div>
    </div>
    
 <b>What's Up?</b><br/>
<textarea id='update' placeholder="What's on your mind?"></textarea>
<input type='submit' value=' Post ' id='update_button'/>
 
</div>

  <div id="container">
    
       <div class="timeline_container">
            <div class="timeline">
                <div class="plus"></div>
            </div>
        </div>
	 	
        <div id="result"></div>
        
	 <div id="popup" class='shade'>
	 		
		<div class="Popup_rightCorner" >	</div>
		<div id='box'>
		<b>What's Up?</b><br/>
		<textarea id='update'></textarea>
		<input type='submit' value=' Update ' id='update_button'/>
         </div>
	
	</div>
	</div>
	
<!--script src="http://code.jquery.com/jquery-1.7.min.js"></script-->
<script src="resources/js/jquery-1.7.min.js"></script>
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script-->
<script src="resources/js/jquery.masonry.min.js"></script>

<script>
$(function(){


function Arrow_Points()
{ 
var s = $('#container').find('.item');
$.each(s,function(i,obj){
var posLeft = $(obj).css("left");
$(obj).addClass('borderclass');
if(posLeft == "0px")
{
html = "<span class='rightCorner'></span>";
$(obj).prepend(html);			
}
else
{
html = "<span class='leftCorner'></span>";
$(obj).prepend(html);
}
});
}

$('.timeline_container').mousemove(function(e)
{
var topdiv=$("#containertop").height();
var pag= e.pageY - topdiv-26;
$('.plus').css({"top":pag +"px", "background":"url('images/plus.png')","margin-left":"1px"});}).
mouseout(function()
{
$('.plus').css({"background":"url('')"});
});
	
	
				
$("#update_button").live('click',function()
{
var x=$("#update").val();
$("#container").prepend('<div class="item"><a href="#" class="deletebox">X</a><div>'+x+'</div></div>');

//Reload masonry
$('#container').masonry( 'reload' );

$('.rightCorner').hide();
$('.leftCorner').hide();
Arrow_Points();

$("#update").val('');
$("#popup").hide();
return false;
});

// Divs
$('#container').masonry({itemSelector : '.item',});
Arrow_Points();
  
//Mouseup textarea false
$("#popup").mouseup(function() 
{
return false
});
  
$(".timeline_container").click(function(e)
{
var topdiv=$("#containertop").height();
$("#popup").css({'top':(e.pageY-topdiv-33)+'px'});
$("#popup").fadeIn();
$("#update").focus();

	
});  


$(".deletebox").live('click',function()
{
if(confirm("Are your sure?"))
{
$(this).parent().fadeOut('slow');  
//Remove item
$('#container').masonry( 'remove', $(this).parent() );
//Reload masonry
$('#container').masonry( 'reload' );
$('.rightCorner').hide();
$('.leftCorner').hide();
Arrow_Points();
}
return false;
});



//Textarea without editing.
$(document).mouseup(function()
{
$('#popup').hide();

});
 
  
});

jQuery("document").ready(function($){
	
	var nav = $('.nav-container');
	//var nav = $('.navigation');
	
	$(window).scroll(function () {
		if ($(this).scrollTop() > 10) {			
			nav.addClass("f-nav");
		} else {
			nav.removeClass("f-nav");
		}
	});

});
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>